<template>
	<view class="container">
		<!-- 使用uni-app的scroll-view组件实现滚动加载 -->
		<scroll-view class="customer-list" scroll-y @scrolltolower="loadMore" lower-threshold="50">
			<!-- 列表 -->
			<view v-for="(customer, index) in customers" :key="customer.id" class="customer-item">
				<view class="name">{{ customer.name }}</view>
				<view class="email">{{ customer.email }}</view>
			</view>
		</scroll-view> 
		<!-- 使用uView的u-loadmore组件显示加载更多的提示 -->
		<u-loadmore :status="loadMoreStatus" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			customers: [], // 客户数据
			currentPage: 1, // 当前页码
			loadMoreStatus: 'more' // 加载状态
		};
	},
	methods: {
		// 模拟加载数据的方法
		loadData(page) {
			// 假设我们有一个API获取客户数据
			const customerData = [
				{ id: 1, name: '客户A', email: 'a@example.com' },
				{ id: 2, name: '客户B', email: 'b@example.com' },
				{ id: 3, name: '客户C', email: 'c@example.com' },
				{ id: 4, name: '客户D', email: 'd@example.com' },
				{ id: 5, name: '客户E', email: 'e@example.com' },
				{ id: 6, name: '客户F', email: 'f@example.com' },
				{ id: 7, name: '客户G', email: 'g@example.com' },
				{ id: 8, name: '客户H', email: 'h@example.com' },
				{ id: 9, name: '客户I', email: 'i@example.com' },
				{ id: 10, name: '客户J', email: 'j@example.com' }
			];

			return new Promise((resolve) => {
				setTimeout(() => {
					resolve(customerData);
				}, 1000);
			});
		},

		// 加载更多数据
		async loadMore() {
			if (this.loadMoreStatus === 'loading') return;

			this.loadMoreStatus = 'loading';
			try {
				const data = await this.loadData(this.currentPage);
				if (data.length > 0) {
					this.customers = [...this.customers, ...data]; // 将新数据追加到现有列表
					this.currentPage += 1; // 增加页码
					this.loadMoreStatus = 'more'; // 重置加载状态
				} else {
					this.loadMoreStatus = 'noMore'; // 无更多数据
				}
			} catch (error) {
				this.loadMoreStatus = 'error'; // 错误状态
			}
		}
	},

	// 页面加载时加载数据
	mounted() {
		this.loadMore();
	}
};
</script>

<style scoped>
.container {
	padding: 20px;
}

.customer-list {
	height: 100%;
}

.customer-item {
	padding: 10px;
	border-bottom: 1px solid #ccc;
}

.name {
	font-weight: bold;
}

.email {
	color: #777;
}
</style>
